<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">{{$t('camera')}}</block>
		</cu-custom>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getCameraList">
			<!-- <view v-if="cameraList.length != 0" class="cu-bar"
				style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
				<view class="action">
					<text class="text-bold">{{$t('camera')+$t('device')}}</text>
				</view>
			</view> -->
			<view v-if="cameraList.length != 0" v-for="(arrItem,arrIndex) in cameraList" :key="arrIndex">
				<view v-for="(item,index) in arrItem" :key="index" class="flex align-center bg-white"
					@tap="tapCamera(item)">
					<view class="margin-left margin-right-lg ">
						<image :src="item.picturePath" class="text-gray"
							style="width:96rpx;height:96rpx;font-size:96rpx;"
							:class="[item.picturePath?'':'cuIcon-pic']"></image>
					</view>
					<view class="flex-sub padding-tb solid-bottom">
						<view class="text-df" style="height:96rpx;line-height:96rpx">{{item.hid}}</view>
					</view>
					<view class="action margin-right-sm">
						<button class="cu-btn shadow" :style="[{backgroundColor:themeConfig.primaryColor}]"
							@tap.stop="tapPicture(item)" style="color: #fff">
							{{$t('picture')}}
						</button>
					</view>
				</view>
			</view>
		</mescroll-body>

		<view class="cu-modal bottom-modal" :class="[isShowCameraAuth?'show':'']" style="text-align: start">
			<view class="cu-dialog bg-white" style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
				<view class="cu-bar bg-white">
					<view class='action text-bold'>
						{{$t('camera')+$t('auth')}}
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom flex"
					style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
					<view class="flex-sub text-center text-grey text-bold"
						style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis ">{{$t('name')}}
					</view>
				</view>
				<view v-for="(item,index) in cameraAuthList" :key="index" class="cu-bar bg-white solid-bottom flex"
					style="border-top-left-radius:20rpx;border-top-right-radius:20rpx;">
					<view class="flex-sub text-center"
						style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">{{item.userName}}</view>
				</view>
				<button class="cu-btn block line-grey margin lg" @tap="openCameraAuth">{{$t('close')}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import * as storage from '@/util/storage.js'
	import *
	as deviceCameraApi from '@/api/camera/cameraApi.js'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import {nextTick} from 'vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					}
				},
				currentPage: 1,
				pageSize: 10,
				cameraList: [],
				cameraAuthList: [],
				bottomBarHeight: '',
				isShowCameraAuth: false,
				userId:storage.getUserId()
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			tapPicture(item) {
				uni.navigateTo({
					url: `/pages/cameraPicture/cameraPicture?cameraId=${item.cameraId}&hid=${item.hid}`
				})
			},
			init(option) {
				this.getCameraList()
				this.getCameraAuthList()
			},
			downCallback() {
				this.currentPage = 1
				this.cameraList = []
				this.mescroll.resetUpScroll()
			},
			getCameraList() {
				let arr = []
				deviceCameraApi.getCameraDeviceList({
					userId: this.userId,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					if (res.data) {
						let {
							data,
							total
						} = res.data
						if (total < 1) {
							let title = this.$t('not') + this.$t('data')
							showToast(title, 'none', 1000, false)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
							return
						}
						for (let index = 0; index < data.length; index++) {
							let {
								picturePath,
								cameraId,
								hid
							} = data[index]
							let obj = {
								picturePath: picturePath && `${picturePath}`,
								cameraId: cameraId,
								hid: hid
							}
							arr.push(obj)
						}
						this.mescroll.endByPage(data.length, total)
						let cameraIndex = this.currentPage - 1
						this.$set(this.cameraList, cameraIndex, arr)
						this.currentPage = this.currentPage + 1
					}
				})
			},
			tapCamera(item) {
				uni.navigateTo({
					url: `/pages/cameraPlayer/cameraPlayer?cameraId=${item.cameraId}&hid=${item.hid}`
				})
			},
			getCameraAuthList() {
				const authList = []
				deviceCameraApi.getCameraAuthList({
					userId: this.userId,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					if (res.data) {
						const data = res.data.data
						for (let index = 0; index < data.length; index++) {
							const {
								userName,
								serverCompany
							} = data[index]
							authList.push({
								userName,
								serverCompany
							})
						}
						this.cameraAuthList = authList
						let bottomBarHeight = storage.getBottomBarHeight()
						if (bottomBarHeight) {
							this.bottomBarHeight = bottomBarHeight
						} else {
							nextTick(() => {
								setTimeout(() => {
									uni.createSelectorQuery().select('#cameraAuth')
										.boundingClientRect((e) => {
											if (e) {
												let height = e.height
												this.bottomBarHeight = height
												storage.setBottomBarHeight(height)
											}
										}).exec()
								}, 0)
							})
						}
					}
				})
			},
			openCameraAuth() {
				this.isShowCameraAuth = !this.isShowCameraAuth
			}
		},
		onShareAppMessage(res) {
			let nickName = storage.getNickName()
			let shortCompanyName = storage.getShortCompanyName()
			return {
				title: `${nickName}${this.$t('share')}${shortCompanyName}`,
				path: `/pages/deviceWarn/deviceWarn`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped>
	page {
		background-color: #ffffff;
	}
</style>
